<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="../plugin/element-ui/index.css">
    <link rel="stylesheet" href="../style/index.css" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台主页</title>
</head>

<body>
<div id="main">
    <div id="main_app">
        <el-container>
            <el-header>
                <span class="title">蛋糕商店后台</span>
                <div class="role">
                    <el-popover placement="bottom" width="77px" trigger="click">
                        <span @click="logout">退出登录</span>
                        <span slot="reference">{{name}}<i class="el-icon-caret-bottom"></i></span>
                    </el-popover>
                </div>

            </el-header>
            <el-container>
                <div class="aside">
                    <div v-for="item in menuList">
                        <el-aside width="200px">
                            <el-menu :unique-opened="false" :collapse-transition="false"
                                     background-color="#343744" text-color="#bfcbd9" active-text-color="#f4f4f5">
                                <div :key="item.id">
                                    <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
                                        <template slot="title">
                                            <i :class="item.icon"></i>
                                            <span>{{item.name}}</span>
                                        </template>
                                        <el-menu-item v-for="sub in item.children" :index="sub.id" :key="sub.id"
                                                      @click="menuHandle(sub,false)">
                                            <i :class="sub.icon"></i>
                                            <span slot="title">{{sub.name}}</span>
                                        </el-menu-item>
                                    </el-submenu>
                                    <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
                                        <i :class="item.icon"></i>
                                        <span slot="title">{{item.name}}</span>
                                    </el-menu-item>
                                </div>

                            </el-menu>

                        </el-aside>

                    </div>
                    <div class="addbg"></div>
                </div>

                <el-main>
                    <iframe id="cIframe" style="width: 21.3375rem;height: 10.1125rem;" class="c_iframe" name="cIframe" :src="iframeUrl" frameborder="0" ></iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>
</div>

    <script src="../plugin/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../plugin/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../plugin/axios/axios.min.js"></script>
    <script src="../js/flexible.js"></script>
    <script src="../js/jquery-3.6.4.js"></script>
    <script src="../js/login.js"></script>
    <script src="../js/request.js"></script>
    <script>
        var app = new Vue({
            el: "#main_app",
            data() {
                return {
                    name: "",
                    showLogOut: true,
                    menuList: [
                        {
                            id: '1',
                            name: '首页',
                            url: '../page/firstIndex.html',
                            icon: 'el-icon-house'
                        },
                        {
                            id: '2',
                            name: '用户管理',
                            url: '../page/employee.html',
                            icon: 'el-icon-user',
                            children: [{
                                id: '2-1',
                                name: "员工信息",
                                url: "../page/employee.html",
                                icon: 'el-icon-service'
                            }, {
                                id: '2-2',
                                name: '用户信息',
                                url: '../page/user.html',
                                icon: 'el-icon-view'
                            }]
                        },
                        {
                            id: '3',
                            name: '商品管理',
                            url: '../page/cake.html',
                            icon: 'el-icon-s-shop'
                        },
                        {
                            id: '4',
                            name: '订单管理',
                            url: '../page/order.html',
                            icon: 'el-icon-shopping-cart-full'
                        },
                        {
                            id: '6',
                            name: '分类管理',
                            url: '../page/category.html',
                            icon: 'el-icon-phone-outline'
                        },
                        {
                            id: '5',
                            name: '评论管理',
                            url: '../page/comments.html',
                            icon: 'el-icon-chat-dot-square'
                        }
                    ],
                    iframeUrl: '../page/firstIndex.html'
                }
            },
            created() {
                this.init()
                this.chageFrame()
            },
            methods: {
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                },
                async init() {
                    let res = window.localStorage.getItem("userInfo")
                    console.log(res)
                    if (res!=null) {
                        console.log(JSON.parse(res).username)
                        this.name = JSON.parse(res).username
                    }else{
                        window.location.href = "../login.html"
                    }
                },
                async logout() {
                    let res = await logoutApi();
                    if(String(res.code)=='1'){
                        window.location.reload();
                    }
                },
                menuHandle(item) {
                    this.iframeUrl = item.url
                },
                chageFrame(){
                    let frame=  document.getElementById("cIframe")
                    frame.height=document.documentElement.clientHeight;
                    frame.width=document.documentElement.clientWidth
                }
            }
        })
    </script>
    <script>
        $(document).ready(function(){
            var pagestyle = function() {

                var iframe = $("#cIframe");

                var h = $(window).height() - iframe.offset().top;

                iframe.height(h);

            } //注册加载事件
             $("#cIframe").load(pagestyle);
            //注册窗体改变大小事件
             $(window).resize(pagestyle);

        });
    </script>
</body>

</html>